<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>丑团外卖</title>
		<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/common.css" />
		<link rel="stylesheet" href="./css/container.css" />
		<link rel="stylesheet" href="./css/footer.css" />
		<link rel="stylesheet" href="./css/add-to-car.css" />
		<script src="./js/vue@3.2.23.js"></script>
	</head>
	<body>
		<!-- http://192.168.0.14:8848/vue-edu/teacher/003-%E7%9F%A5%E8%AF%86%E5%9B%9E%E9%A1%BE-%E8%B4%AD%E7%89%A9%E8%BD%A6%E9%A1%B5%E9%9D%A2%E6%95%88%E6%9E%9C/index.html -->
	<div id="app">
		<div class="container">
			<div class="menu">
				<div class="menu-item active"><span>推荐</span></div>
				<div class="menu-item"><span>热销</span></div>
				<div class="menu-item"><span>折扣</span></div>
				<div class="menu-item"><span>夏日冰咖必喝榜</span></div>
				<div class="menu-item"><span>进店必喝</span></div>
				<div class="menu-item"><span>只喝美式</span></div>
				<div class="menu-item"><span>酷爽特调水果冰萃</span></div>
				<div class="menu-item"><span>经典奶咖</span></div>
				<div class="menu-item"><span>创意奶咖</span></div>
				<div class="menu-item"><span>瑞纳冰季</span></div>
				<div class="menu-item"><span>不喝咖啡</span></div>
				<div class="menu-item"><span>轻食甜品</span></div>
				<div class="menu-item"><span>热卖套餐</span></div>
			</div>
			<div class="goods-list">
				<div class="goods-item" :class="{active : val.chooseNum > 0}" v-for="(val,index) in goods">
					<img :src=val.pic alt="" class="goods-pic" />
					<div class="goods-info">
						<h2 class="goods-title">{{val.title}}</h2>
						<p class="goods-desc">{{val.desc}}</p>
						<p class="goods-sell">
							<span>月售 {{val.sellNumber}}</span>
							<span>好评率{{val.favorRate}}%</span>
						</p>
						<div class="goods-confirm">
							<p class="goods-price">
								<span class="goods-price-unit">￥</span>
								<span>{{val.price}}</span>
							</p>
							<div class="goods-btns">
								<i class="iconfont i-jianhao" @click="dserse(val)"></i>
								<span>{{val.chooseNum}}</span>
								<i class="iconfont i-jiajianzujianjiahao" @click="inerses(val)"></i>
							</div>
						</div>
					</div>
				</div>
			</div>   
		</div>
		<div class="footer">
			<div class="footer-car-container" >
				<div class="footer-car" :class="{active:payInfo.allNum > 0}">
					<i class="iconfont i-gouwuchefill"></i>
					<span class="footer-car-badge">{{payInfo.allNum}}</span>
				</div>
				<div class="footer-car-price">
					<span class="footer-car-unit">￥</span>
					<span class="footer-car-total">{{payInfo.payPrice.toFixed(2)}}</span>
				</div>
				<div class="footer-car-tip">配送费￥{{delevaryPrice}}</div>
			</div>
			<div class="footer-pay" :class="{active:payInfo.threSholdPrice < 0}">
				<a href="">去结算</a>
				<span>还差￥{{payInfo.threSholdPrice.toFixed(0)}}元起送</span>
			</div>
		</div>

		<div class="add-to-car">
			<i class="iconfont i-jiajianzujianjiahao"></i>
		</div>
	</div>
		<script src="./js/data.js"></script>
		<script src="./js/index.js"></script>
	</body>
</html>
<script>
	const {
		createApp
	} = Vue;
	const app = createApp({
		data() {
			return {
				goods,
				delevaryPrice:5,
				liftThreShold:30
			}
		},
		methods: {
			inerses(val) {
				console.log(val)
				val.chooseNum++
				val.allPrice = val.chooseNum * val.price
			},
			dserse(val) {
				if (val.chooseNum <= 0) {
					return;
				}
				val.chooseNum--
				val.allPrice = val.chooseNum * val.price
			}
		},
		mounted() {
			this.goods = this.goods.map(val => {
				return {
					...val,
					chooseNum: 0,
					allPrice: 0
				}
			})
		},
		computed: {
			payInfo() {
				let sumPrice = 0;
				let allNum = 0;
				let threSholdPrice = 0;
				this.goods.map(val =>{
					sumPrice += val.allPrice;
					allNum += val.chooseNum;
					threSholdPrice = this.liftThreShold - sumPrice
				})
				return {
					payPrice:sumPrice,
					allNum,
					threSholdPrice
				}
			}
		}
	})
	const vm = app.mount("#app")
</script>